<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发布文章</title>
    <link rel="shortcut icon" href="../static/imgs/cms.png" type="image/x-icon">
    <!-- 引入css -->
    <link rel="stylesheet" type="text/css" href="../editormd/css/editormd.min.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css">
</head>
<body>
<!-- 修改专栏框 -->
<div class="modal fade" id="change-column" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #373636;color: white;font-weight: bold">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">请输入新专栏名：</h4>
            </div>
            <div class="modal-body">
                <label>
                    <input type="text" class="column-name">
                </label>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default test">提交</button>
                <button type="button" class="btn btn-default test1" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<div class="editor-box">
    <!--文章内容-->
    <div id="md-content" style="z-index: 1 !important;">
        <label>
            <textarea>222</textarea>
        </label>
    </div>
</div>
<button class="dd" style="height: 100px;width: 100px;"></button>

    <div id="editor1" style="z-index: 1 !important;">
        <label>
            <textarea></textarea>
        </label>
    </div>
<div id="markdown-body">

</div>
<div style="height: 100px;width: 100px;background-color: black;cursor: pointer"></div>

<ul class="nav nav-tabs" style="margin-left: 100px">
    <li role="presentation" class="dropdown">
        <a class="dropdown-toggle" style="color: black" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
            月 <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" style="min-width: 70px">
            <li class="month"><a href="#">1月</a></li>
            <li class="month"><a href="#">2月</a></li>
            <li class="month"><a href="#">3月</a></li>
            <li class="month"><a href="#">4月</a></li>
        </ul>
    </li>
</ul>
<!-- 这里必须先引入jquery -->
<script src="../static/js/jQuery.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<!-- 引入js -->
<script src="../editormd/editormd.js"></script>
<script src="../editormd/lib/marked.min.js">
</script>
<script type="text/javascript">
    //初始化Markdown编辑器
    let contentEditor;


    $(function() {
        $(".dropdown-menu").append(`<li class="month"><a href="#">9月</a></li>`);
        /*markdown编辑器初始化*/
        contentEditor = editormd("md-content", {
            width   : "100%",//宽度
            height  : 500,//高度
            imageUpload: true,
            appendMarkdown:"#1",
            imageFormats: ["jpg","jpeg","gif","png","bmp","webp"],
            imageUploadURL: "http://localhost:8080/uploadServlet?action=local_upload",
            syncScrolling : "single",//单滚动条
            path    : "../editormd/lib/"//依赖的包路径
        });
        $(".month").click(function () {
            $(".dropdown-toggle").html($(this).text()+ `<span class="caret"></span>`);
            alert($(".dropdown-toggle").text());
        })
        $(".dd").click(function () {
            const content_text=$(".editormd-preview-container").text().substring(0,150);//纯文本
             alert(content_text);
        })
    });

    $(".test").click(function () {
          $(".test1").click();
    })


    /*模态框函数*/
    function modal(content) {
        $('.modal-body').html(content);
        $("#myModal").modal("show");
    }
</script>
</body>
</html>
